<template>
  <header>
    <div class="l-content">
      <el-button plain icon="el-icon-menu" size="mini" @click="collapseMenu"></el-button>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current">
          <!-- 判断curren是否存在在显示 -->
         {{current.label}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <img class="user" :src="userImg" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logon">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
//导入vuex的数据进行联动效果 固定写法 State使用的是这个
import {mapState} from 'vuex';
export default {
  name: "Header",
  data() {
    return {
      //图片要模块化导入
      userImg: require("assets/img/user.png"),
    };
  },
  computed:{
    // 在计算属性进行定义 要合并的 通过...展开  分模块后 通过箭头函数来引用 
    ...mapState({
      current:state => state.tab.currentMenu
    })
  },
  methods:{
    collapseMenu() {
      //调用vuex绑定的方法 让其取反
      this.$store.commit('collapseMenu')
    },
    //退出功能
    logon() {
      //清除token 和 清空菜单 vuex里面方法
       this.$store.commit('clearToken')
       this.$store.commit('clearMenu')
       this.$router.push({name:'login'})
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.l-content{
    display: flex;
    align-items: center;
    .el-button{
        margin-right: 20px; ;
    }
}
.r-content {
  .user {
    height: 54px;
    width: 54px;
    border-radius: 50%;
  }
}
</style>
<style lang="scss">
.el-breadcrumb__item{
  .el-breadcrumb__inner{
 color: #666666;
 font-weight: normal;
  }
  &:last-child{
    .el-breadcrumb__inner {
      color: #fff;
    }
  }
}
</style>